<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>工作台</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-base.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-mhqy.css">


</head>
<body class="body_bg">

<!--学籍情况-->
<section class="school_roll">
    <h2 class="h2_title">学籍情况</h2>
    <div class="roll_body">
        <a  href="javascript:;"  class="roll_item">
            <p class="p_text">学员总数/人</p>
            <strong class="w_text">2324</strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">在读学员/人</p>
            <strong class="w_text">233</strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">毕业学员/人</p>
            <strong class="w_text">0</strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">退学学员/人</p>
            <strong class="w_text">0</strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">休学学员/人</p>
            <strong class="w_text">0</strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">毕业率/人</p>
            <strong class="w_text">0%</strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">退学率/人</p>
            <strong class="w_text">0%</strong>
        </a>
    </div>
</section>

<!--服务情况-->
<section class="school_roll">
    <h2 class="h2_title">服务情况</h2>
    <div class="serving_body">
        <a href="javascript:;" class="serving_item">
            <span class="img_1"></span>
            <p class="p_text">组织教学直播活动42场</p>
            <p class="p_text">累计1000人次参与</p>
        </a>
        <a href="javascript:;" class="serving_item">
            <span class="img_2"></span>
            <p class="p_text">发送学习提醒短信</p>
            <p class="p_text">3346条</p>
        </a>
        <a href="javascript:;" class="serving_item">
            <span class="img_3"></span>
            <p class="p_text">电话督促学习</p>
            <p class="p_text">478人</p>
        </a>
        <a href="javascript:;" class="serving_item">
            <span class="img_4"></span>
            <p class="p_text">学生座谈会</p>
            <p class="p_text">0次</p>
        </a>
        <a href="javascript:;" class="serving_item">
            <span class="img_5"></span>
            <p class="p_text">问卷调查</p>
            <p class="p_text">0次</p>
        </a>
    </div>
</section>

<!--课程学习情况-->
<section class="school_roll">
    <h2 class="h2_title">课程学习情况</h2>
    <div class="course_body">
        <a  href="javascript:;"  class="roll_item">
            <p class="p_text">本学期开课门数</p>
            <strong class="w_text">23 <span>门</span></strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">本学期开课门数</p>
            <strong class="w_text">1212 <span>次</span></strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">每门课程平均学习次数</p>
            <strong class="w_text">20 <span>次/人</span></strong>
        </a>
        <a href="javascript:;"  class="roll_item">
            <p class="p_text">每门课程平均学习次数</p>
            <strong class="w_text">23.36 <span>小时/人</span></strong>
        </a>
    </div>
</section>

<!--专业报读-->
<section class="school_roll">
    <h2 class="h2_title">专业报读</h2>
    <div class="specialty_body">
        <div id="hr_map" style="height:450px;width: 50% ;"></div>
        <div class="table_body">
            <h2 class="h2_text">本学期可报读专业</h2>
            <table>
                <tr>
                    <th>本科</th>
                    <th>专科</th>
                    <th></th>
                </tr>
                <tr>
                    <td>市场营销</td>
                    <td>工商企业管理</td>
                    <td>市场营销</td>
                </tr>
                <tr>
                    <td>市场营销</td>
                    <td>工商企业管理</td>
                    <td>市场营销</td>
                </tr>
                <tr>
                    <td>市场营销</td>
                    <td>工商企业管理</td>
                    <td>市场营销</td>
                </tr>
                <tr>
                    <td>市场营销</td>
                    <td>工商企业管理</td>
                    <td>市场营销</td>
                </tr>
                <tr>
                    <td>市场营销</td>
                    <td>工商企业管理</td>
                    <td>市场营销</td>
                </tr>
                <tr>
                    <td>市场营销</td>
                    <td>工商企业管理</td>
                    <td>市场营销</td>
                </tr>
            </table>
        </div>
    </div>
</section>

<!--努力学员排行-->
<section class="school_roll">
    <h2 class="h2_title">努力学员排行 <span class="span_text">  *学习时长排名</span></h2>
    <div class="user_body">
        <a  href="javascript:;"  class="user_item">
            <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/mh_1.png" alt="">
            <p class="user_name">刘姥姥</p>
            <p class="user_time">155.2小时</p>
        </a>
        <a  href="javascript:;"  class="user_item">
            <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/mh_1.png" alt="">
            <p class="user_name">刘姥姥</p>
            <p class="user_time">155.2小时</p>
        </a>
        <a  href="javascript:;"  class="user_item">
            <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/mh_1.png" alt="">
            <p class="user_name">刘姥姥</p>
            <p class="user_time">155.2小时</p>
        </a>
        <a  href="javascript:;"  class="user_item">
            <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/mh_1.png" alt="">
            <p class="user_name">刘姥姥</p>
            <p class="user_time">155.2小时</p>
        </a>
        <a  href="javascript:;"  class="user_item">
            <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/mh_1.png" alt="">
            <p class="user_name">刘姥姥</p>
            <p class="user_time">155.2小时</p>
        </a>
    </div>
</section>

<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/echarts.min.js"></script>

<script type="text/javascript">
    var hcChart = echarts.init(document.getElementById('hr_map'));

    hcOption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            bottom : '20',
            formatter: function (name) {
                console.log(hcOption.series[0].data) ;
                var z_number  = 0 ;
                var t_number = 0 ;
                for(var i = 0;i < hcOption.series[0].data.length ; i++){
                    z_number += hcOption.series[0].data[i].value ;
                    if(hcOption.series[0].data[i].name == name){
                        t_number = hcOption.series[0].data[i].value ;
                    }
                }

                return name + '('+((t_number/z_number).toFixed(4))*100+'%)';
            },
            data:['工商管理','市场销售','其他专业']
        },
        calculable : true,
        series : [
            {
                name:'报读专业排行',
                type:'pie',
                radius : [20, 110],
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {value:3, name:'工商管理'},
                    {value:5, name:'市场销售'},
                    {value:25, name:'其他专业'},
                ]
            }
        ]
    };
    hcChart.setOption(hcOption);
    window.addEventListener("resize", function () {//自适应
        hrChart.resize();
    });


</script>

</body>
</html>